<template>
  <div>
    <div class="header">
      <i
        v-if="!isCollapse"
        @click="changeMenu"
        class="iconfont icon-youyi-04 menu-icon"
      ></i>
      <i v-else @click="changeMenu" class="iconfont icon-zuoyi-04 menu-icon"></i>
      <div class="header-right">
        <el-dropdown @command="clickLang">
          <span class="el-dropdown-link" style="color: #fff">
            多语言<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zh">中文</el-dropdown-item>
            <el-dropdown-item command="en">English</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="user">
          欢迎:{{userInfo.user}}
         <i class="iconfont icon-tuichu loginout" @click="loginout"></i>
        </div>
      </div>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script>
import { mapState ,mapMutations} from 'vuex';
export default {

  props: ["isCollapse"],
  data() {
    return {
      command: 'zh'
    }
  },
  methods: {
  ...mapMutations('loginModule', ['clearUser']),
    loginout() {
      this.$router.push('/login')
      this.clearUser()
      localStorage.removeItem('user')
      
    },
    changeMenu() {
      this.$emit("changeCollapse");
    },
    clickLang(command){
      console.log('clickLang',command)
      if(command === 'zh'){
        this.$i18n.locale = 'zh'
    }else{
        this.$i18n.locale = 'en'
    }
    }
  },
  computed: {
    ...mapState('loginModule', ['userInfo'])
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 60px;
  background: #0aa1ed;
  padding: 17px 0;
  box-sizing: border-box;

  .header-right {
    color: white;
    float: right;
    margin-right: 20px;
    display: flex;
    margin-top: 5px;
    align-items: center;
    // background-color: red;
    // 两端对齐
    justify-content: space-between;
  }
  .user {
    margin-left: 20px;
  }
}
.loginout{
  margin-right: 1px;
}
.menu-icon{
  font-size: 30px;
}
</style>
